<template>
	<view class="punchin ">
		<!-- 地图 -->
		<view class="punchin_map">
			<view class="map_box">
				<!-- #ifdef H5-->
				<view class="map_box" id="PublicMap"></view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<map class="H5_map" :latitude="latitude" :longitude="longitude" :markers="covers" scale="16">
				</map>
				<!-- #endif -->
			</view>
		</view>
		<!-- 详情 -->
		<view class="punchin_details">
			<!-- 位置信息 -->
			<view class="punchin_details_address">
				<view class="address_line">
					<view class="address_line_mode">
						<text class="text-line">当前位置·</text>
					</view>
					<view class="address_line_mode1">
						<input type="text" v-model="address" class="search-antext" />
					</view>
				</view>
			</view>
			<!-- 考勤信息 -->
			<view class="punchin_details_attendance">
				<view class="attendance_line">
					<!-- 时间 -->
					<view class="attendance_line_time">
						<text class="line_time_text">{{this.nowdate}}</text>
						<!-- {{ clock | nowdate }} -->
						<p>
							<text class="line_time_text_p">{{this.nowTime}}</text>
						</p>
					</view>
					<!-- 打卡 -->
					<view class="attendance_line_clock">
						<view class="clock_box">
							<button class="clock_box_text" @click="punchin"
								:disabled="activate ==='2' || activate === '1'">上班打卡</button>
						</view>
						<view class="clock_box">
							<button class="clock_box_text" :disabled="activate ==='2'" @click="punchout">下班打卡</button>
						</view>
					</view>
					<!-- 打卡详情 -->
					<view class="attendance_line_card">
						<view class="punch_card">
							<text class="punch_card_text">上班:{{intime}}</text>
							<p>
								<text class="punch_card_text_p">{{intimeday}}</text>
							</p>
						</view>
						<view class="punch_card">
							<text class="punch_card_text">下班:{{outtime}}</text>
							<p>
								<text class="punch_card_text_p">{{outtimeday}}</text>
							</p>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		submitpinchsign
	} from '@/api/home.js';
	import getdatetime from '@/api/getdateTime.js';
	import format from '@/api/format.js';
	import URL from '@/util/url.js'
	export default {
		data() {
			return {
				GDMap: null,
				marker: null,
				clock: Date.parse(new Date()),
				address: '',
				createTime: '', //获取的时间戳
				nowTime: '', //时间戳年月日
				nowdate: '', //时间戳时分秒
				intime: '', //上班打卡时间时分秒
				intimeday: '', //上班打卡时间年月日
				outtime: '', //下班打卡时间
				outtimeday: '', //上班打卡时间年月日
				activate: '',
				timedate: '',
				searchForm: {
					address: '', //位置信息
					gcjGeometry: '', //地理坐标
					clockType: '', //打卡类型 1 上班  2下班
				},
				longitude: '',
				latitude: '',
				covers: [],
				addressName: '',
				currentXy: {
					gdx: '',
					gdy: '',
				},
				mtype: null,
				currentLocation: {}
			}
		},
		onshow() {},
		onLoad() {
			//获取当前时间戳
			var timeStr = getdatetime.dateTimeStr('y-m-d'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
			this.nowTime = timeStr;
			this.createTime = this.nowTime;
			var timeDate = getdatetime.dateTimeStr('h:i:s');
			this.nowdate = timeDate;

			// 查询自己的签到信息
			this.getpunchin(this.createTime);

			// #ifdef APP-PLUS

			//定位
			this.geoLocation();

			// #endif

		},
		methods: {
			// 查询自己的签到信息
			getpunchin(data) {
				let _this = this;
				uni.request({
					url: URL.Punchin + '?createTime=' + data,
					method: "GET",
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token'),
					},
					success: function(res) {
						var resdata = res.data.data || '';
						if (resdata == '') {
							return;
						} else {
							resdata.forEach((ele, index) => {
								if (ele.clockType == 1) { //上班打卡
									_this.activate = ele.clockType;

									_this.renderTime(ele.createTime);
								} else if (ele.clockType == 2) { //下班打卡
									_this.activate = ele.clockType;

									_this.outliTime(ele.createTime);
									uni.showToast({
										title: '今日已完成打卡',
										duration: 2000
									});
								}
							})
						}

					}
				})
			},
			renderTime(date) {
				let _this = this;
				var dateee = new Date(date).toJSON();
				var timedate = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(
					/\.[\d]{3}Z/, '');
				let timedatein = timedate.slice(11); //时分秒
				_this.intime = timedatein; //上
				let daydatein = timedate.substring(0, 10); //年月日
				_this.intimeday = daydatein; //上
			},
			outliTime(date) {
				let _this = this;
				var dateee = new Date(date).toJSON();
				var timedate = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(
					/\.[\d]{3}Z/, '');
				let timedatein = timedate.slice(11); //时分秒
				_this.outtime = timedatein; //下
				let daydatein = timedate.substring(0, 10); //年月日
				_this.outtimeday = daydatein; //上
			},

			//定位(手机)
			geoLocation() {
				let _this = this;
				uni.showLoading({
					title: '正在获取定位'
				});
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success(res) {
						_this.longitude = res.longitude;
						_this.latitude = res.latitude

						//点位重新更新
						let currentLocation = uni.getStorageSync('currentLocation');

						_this.covers = [{
							id: 1,
							latitude: _this.latitude,
							longitude: _this.longitude,
							iconPath: '../../static/city-manage/uni-address.png',

						}];
						//把当前处置人员的位置存到storage
						_this.currentLocation = {
							currentx: _this.longitude,
							currenty: _this.latitude,
							currentAddress: _this.addressName
						}

						_this.address = _this.currentLocation.currentAddress;
						_this.searchForm.address = _this.address;
						_this.longitude = _this.currentLocation.currentx;
						_this.latitude = _this.currentLocation.currenty;
						uni.hideLoading()
					}
				});
			},
			// 上班打卡
			punchin() {
				this.searchForm.clockType = '1';
				this.searchForm.gcjGeometry = "POINT(" + this.longitude + " " + this.latitude + ")";

				let searchFormData = this.searchForm;
				submitpinchsign(searchFormData).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '上班打卡成功',
							duration: 2000
						});

						this.getpunchin(this.createTime);
						uni.$emit('uploadGps.check');

						return;
					} else {
						this.$tip.toast(res, msg);
					}
				}).catch(() => {

				});
			},
			// 下班打卡
			punchout() {
				this.searchForm.clockType = '2';
				this.searchForm.gcjGeometry = "POINT(" + this.longitude + " " + this.latitude + ")";
				let searchFormData = this.searchForm;
				submitpinchsign(searchFormData).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '下班打卡成功',
							duration: 2000
						});
						this.getpunchin(this.createTime);

						uni.$emit('uploadGps.check');

						return;
					} else {
						this.$tip.toast(res, msg);
					}
				}).catch(() => {

				});
			},
		}
	}
</script>

<style>
	.punchin {}

	.punchin_map {}

	.map_box {
		height: 500rpx;
	}

	/* #ifdef H5 */
	#PublicMap {
		width: 750rpx;
		height: 500rpx;
	}

	.H5_map {
		width: 750rpx;
	}

	/* #endif */

	/* #ifdef APP-PLUS */
	.H5_map {
		width: 750rpx;
		height: 500rpx;
	}

	/* #endif */

	.punchin_details {
		background-color: #F3F4F8;
	}

	.punchin_details_address {
		padding: 30rpx 48rpx;
	}

	.address_line {
		height: 74rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding-left: 20rpx;
		display: flex;
		position: relative;
	}

	.address_line_mode {
		width: 200rpx;
	}

	.address_line_mode1 {
		width: calc(100% - 200rpx);
		position: absolute;
		top: 0rpx;
		left: 165rpx;
	}

	.punchin_details_attendance {
		padding: 0rpx 48rpx;
	}

	.attendance_line {
		height: 500rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 0rpx 40rpx;
	}

	.attendance_line_time {
		height: 140rpx;
		border-bottom: 2px solid #F6F6F6;
	}

	.line_time_text {
		font-size: 52rpx;
		color: #000000;
		font-weight: bold;
	}

	.line_time_text_p {
		font-size: 32rpx;
		color: #66656A;
		margin-left: 10rpx;
		font-weight: normal;
		margin-top: 0rpx;
	}

	.attendance_line_clock {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.clock_box {
		width: 270rpx;
		height: 90rpx;
		border-radius: 20rpx;
	}

	.clock_box_text {
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		background-color: #468EF2;
		border: none;
	}

	.attendance_line_card {
		margin-top: 10rpx;
	}

	.punch_card {
		height: 80rpx;
		margin-top: 20rpx;
	}

	.punch_card_text {
		font-weight: bold;
		padding-left: 20rpx;
		font-size: 32rpx;
	}

	.punch_card_text_p {
		margin-top: -12rpx;
		padding-left: 30rpx;
		color: #969696;
		font-weight: normal;
	}

	.text-line {
		text-align: center;
		line-height: 74rpx;
		font-size: 32rpx;
	}

	.search-antext {
		height: 74rpx;
		font-size: 32rpx;
		text-indent: 20rpx;
		background-color: #ffffff;
		border: none;
	}
</style>
